import React, {PureComponent} from "react";
import {Button, DatePicker, Icon, Input, Select, Table} from "antd";


const RangePicker = DatePicker.RangePicker;

const Option = Select.Option;

class WarningManagerComponent extends PureComponent {


    render() {

        const columns = [
            {
                title: <div style={{textAlign: "center"}}>车牌号</div>,
                dataIndex: 'carNumber',
                render: text => <div style={{textAlign: "center"}}>${text}</div>
            },
            {
                title: <div style={{textAlign: "center"}}>终端编号</div>,
                dataIndex: 'machineNumber',
                render: text => <div style={{textAlign: "center"}}>${text}</div>
            },
            {
                title: <div style={{textAlign: "center"}}>姓名</div>,
                dataIndex: "name",
                render: text => <div style={{textAlign: "center"}}>${text}</div>
            },
            {
                title: <div style={{textAlign: "center"}}>联系方式</div>,
                dataIndex: "phone",
                render: text => <div style={{textAlign: "center"}}><Icon type={"wifi"}/></div>
            },
            {
                title: <div style={{textAlign: "center"}}>开始时间</div>,
                dataIndex: "beginTime",
                render: text => <div style={{textAlign: "center"}}>${text}</div>
            },
            {
                title: <div style={{textAlign: "center"}}>结束时间</div>,
                dataIndex: "endTime",
                render: text => <div style={{textAlign: "center"}}><Icon type={"copy"}/></div>
            },
            {
                title: <div style={{textAlign: "center"}}>是否报警</div>,
                dataIndex: "isWarning",
                render: text => <div style={{textAlign: "center"}}><Icon type={"form"}/></div>
            },
            {
                title: <div style={{textAlign: "center"}}>详情</div>,
                dataIndex: "detail",
                render: text => <div style={{textAlign: "center"}}>${text}</div>
            }
            ];

        const data = [
            {
                key: '1',
                carNumber: '0010',
                machineNumber: '10001',
                name: 'John Brown',
                phone: '15646655',
                beginTime: "20181001",
                endTime: "20181101",
                isWarning: false,
                detail: "报警详情"
            },

        ];

        const pagination = {
            showQuickJumper: true,
            pageSize: 10,
            current: 1,
        };



        return (
            <div style={warningWrapperStyle}>
                <div style={wrapperCenterWrapper}>
                    <div>
                        <span style={searchSpanStyle}>选择日期</span>
                        <RangePicker
                            showTime={{format: 'HH:mm'}}
                            format="YYYY-MM-DD HH:mm"
                            placeholder={['Start Time', 'End Time']}
                            style={rangePickerStyle}
                        />

                        <span style={searchSpanStyle}>姓名</span>
                        <Input style={inputStyle} placeholder={"请输入姓名"}/>

                        <span style={searchSpanStyle}>终端编号</span>
                        <Input style={inputStyle} placeholder={"请输入终端编号"}/>


                        <span style={searchSpanStyle}>报警状态</span>
                        <Select defaultValue={"全部"} style={selectStyle}>
                            <Option value={"全部"}>全部</Option>

                            <Option value={"正在报警"}>正在报警</Option>

                            <Option value={"报警解除"}>报警解除</Option>

                        </Select>

                        <Button htmlType={"primary"}>搜索</Button>
                    </div>

                    <Table
                        columns={columns}
                        dataSource={data}
                        pagination={pagination}
                        style={{margin:"20px 12px 0"}}
                    />
                </div>
            </div>
        );
    }


}

export default WarningManagerComponent;

const warningWrapperStyle = {
    borderRadius: 4,
    backgroundColor: "#fff",
    height: '100%',
};

const wrapperCenterWrapper = {
    padding: "10px 12px",
    height: '100%',
};

const searchSpanStyle = {
    display: "inline-block",
    marginRight: 12,
    fontSize: 14,
};

const selectStyle={
    width: 130,
    marginRight:12,
};


const inputStyle = {
    width: 150,
    fontSize: 12,
    marginRight: 12,
};

const rangePickerStyle ={
    marginRight:12,
};